<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <div>
          <el-descriptions
            title="改造详情"
            :column="2"
            :labelStyle="labelStyle"
            border
          >
            <el-descriptions-item label="无障碍改造标题" :span="2">{{
                                                            taskInfo.name
                                                            }}
            </el-descriptions-item>
            <el-descriptions-item label="计划开始时间">{{
                                                 taskInfo.startTime
                                                 }}
            </el-descriptions-item>
            <el-descriptions-item label="计划结束时间">{{
                                                 taskInfo.endTime
                                                 }}
            </el-descriptions-item>
            <el-descriptions-item label="改造牵头人">{{
                                                taskInfo.lerderUserName
                                                }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{
                                               taskInfo.lerderUserMobile
                                               }}
            </el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">{{
                                                       taskInfo.status | keyText("BARRIER_FREE_STATUS")
                                                       }}
            </el-descriptions-item>
            <el-descriptions-item label="财政手续" :span="2" v-if="taskInfo.financeFile">
              <div style="display: inline-block">
                <div
                  v-for="(item, index) in JSON.parse(taskInfo.financeFile)"
                  :key="index"
                  style="margin-bottom: 4px"
                >
                  <a class="article_title_a" @click="previewDetail(item.id)">
                    <i class="el-icon-files mr5" />{{ item.fileName }}
                  </a>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="opt">
          <template v-if="taskInfo.status == 'REMOULD'">
            <el-button type="success" @click="finish">完结</el-button>
            <el-button type="primary" @click="editFinancial">上传财政手续</el-button>
          </template>
          <el-button v-if="taskInfo.status == 'COLLECT'" type="primary" @click="pass">
            审批通过
          </el-button>
          <el-button @click="$parent.who = 'manageTable'">返回</el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-descriptions title="无障碍改造汇总结果"></el-descriptions>
        <div v-if="records.length !== 0">
          <template v-for="item in records">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="乡镇"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.orgName }}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  {{ item.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="汇总状态">
                  {{ item.status | keyText("BARRIER_FREE_STATUS") }}
                </el-descriptions-item>
                <el-descriptions-item label="可下发数量">
                  {{ item.taskCount}}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span @click="view(item)">
                  查看详情
                </span>
                <span
                  v-if="item.status==='REPORT'"
                  style="color:#F56C6C" @click="reject(item)"
                >
                  驳回
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="5"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
      <el-dialog :visible.sync="showFinancial" title="财政手续" @close="close">
        <el-upload
          class="upload"
          drag
          :action="url"
          :headers="headers"
          multiple
          :on-success="successHandle"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :on-preview="previewDetail"
          :limit="10"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
        <div slot="footer">
          <el-button type="primary" @click="sureFinancial">确定</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "manageDetail",
  props: {
    obj: [Object, Boolean]
  },
  activated() {
    if (this.obj) {
      this.remouldId = this.obj.remouldId || this.obj.id;
      this.getDetail(this.remouldId)
    }
  },
  data() {
    return {
      fileList: [],
      remouldId: this.obj.id,
      taskInfo: {},
      // url: window.api.uploadUrl1,
      url: window.api.sysUploadUrl + '?path=barrier',
      filePath: "",
      headers: {
        userRole: "ADMIN",
        token: sessionStorage.getItem("token")
      },
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      total: 1,
      pageIndex: 1,
      records: [],
      showFinancial: false
    };
  },
  methods: {
    previewDetail(file) {
      const url = file.response ? file.response.id : file.id
      this.openTabPage(
        window.api.preFile +
        "?url=" +
        window.api.secretFilePreview +
        url +
        "?token=" +
        window.sessionStorage.getItem("token")
      );
    },
    getDetail(para) {
      this.API.getRemouldById({ id: para }).then(res => {
        this.taskInfo = res.data;
        this.getList();
      });
    },
    close() {
      this.fileList = []
      this.filePath = ''
      this.showFinancial = false
    },
    // 财政资料
    editFinancial() {
      this.showFinancial = true
      if (this.taskInfo.financeFile) {
        const files = JSON.parse(this.taskInfo.financeFile)
        for (let i = 0; i < files.length; i++) {
          this.fileList.push({ name: files[i].fileName, url: files[i].fileName, id: files[i].id });
        }
      }
    },
    sureFinancial() {
      this.API.updateFinance({ remouldId: this.remouldId, filePath: this.filePath }).then(res => {
        this.success('财政手续上传成功')
        this.getDetail(this.remouldId)
        this.close()
      })
    },
    successHandle(res, file, fileList) {
      this.filePath = "";
      let ids = [];
      fileList.map(item => {
        if (item.response && item.response.id) {
          ids.push(item.response);
        } else {
          ids.push({
            id: item.id,
            fileName: item.name
          });
        }
      });
      this.filePath = JSON.stringify(ids);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      this.filePath = "";
      let ids = [];
      fileList.map(item => {
        if (item.response && item.response.id) {
          ids.push(item.response);
        } else {
          ids.push({
            id: item.id,
            fileName: item.name
          });
        }
      });
      this.filePath = ids.length ? JSON.stringify(ids) : '';
    },
    // 审批通过
    pass() {
      this.$confirm("确认审批通过?", "提示", { type: "success" }).then(() => {
        this.API.approve({ remouldId: this.remouldId }).then(res => {
          this.success("审批通过成功");
          this.$parent.show = "manageTable";
        });
      });
    },
    // 完结
    finish() {
      if (!this.taskInfo.financeFile) return this.warning('完结前先请上传财政手续')
      this.$confirm("确认完结?", "提示", { type: "success" }).then(() => {
        this.API.finish({ remouldId: this.remouldId }).then(res => {
          this.success("成功完结");
          this.$parent.show = "manageTable";
          this.fileList = []
          this.filePath = ""
        });
      });
    },
    // 获取乡镇汇总列表
    getList() {
      let query = {
        remouldId: this.remouldId,
        pageIndex: this.pageIndex,
        pageSize: 5
      };
      this.API.getTownPageList(query).then(res => {
        this.total = res.data.total;
        this.records = res.data.records;
      });
    },
    // 查看详情
    view(item) {
      this.$parent.show("manageDetail_1", item);
    },
    // 驳回乡镇申请
    reject({ id }) {
      this.$confirm("确认驳回?", "提示", {
        type: "warning"
      }).then(() => {
        this.API.reject({ townId: id }).then(res => {
          this.success("驳回成功");
          this.getList();
        });
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
    }
  }
};
</script>

<style scoped>
  .upload >>> .el-upload,
  .upload >>> .el-upload-dragger {
    width: 100%;
  }

  .opt {
    margin: 20px;
    display: flex;
    justify-content: center;
  }

  .desAfter {
    border: 1px solid #ebeef5;
    border-top: none;
    padding: 12px 10px;
    font-size: 14px;
    color: #409eff;
    text-align: center;
  }

  .desAfter span {
    margin: 0 5px;
    cursor: pointer;
  }
</style>
